<template>
  <!-- 头部 -->
  <div class="topBox">
    <div class="L"><a href="index.html">LOGO</a></div>
    <div class="C">
      <div class="saerchbox">
        <input name="" type="text" placeholder="请输入您要搜索的内容"><img src="/assets/images/ss.png">
      </div>
    </div>
    <div class="R"><img src="/assets/images/tr.png"></div>
  </div>

  <!-- 轮播图 -->
  <div class="aui-m-slider">
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item in top">
        <router-link :to="{path:'/product/info',query:{proid: item.id}}">
        <van-image
            width="100%"
            height="100%"
            fit="fill"
            :src="item.thumb_text"
          />
        </router-link>
      </van-swipe-item>
  </van-swipe>
  </div>

  <!-- 分类 -->
  <div class="lqgwBox">
    <ul>
      <li v-for="item in type">
        <router-link :to="{path:'/product/list',query:{typeid:item.id}}">
          <img :src="item.thumb_text">
          <p>{{ item.name }}</p>
        </router-link>
      </li>
    </ul>
  </div>
  
  <!-- 推荐商品 -->
  <ul class="proul">
    <li v-for="item in news">
      <div class="con" >
        <router-link :to="{path:'/product/info',query:{proid: item.id}}">
          <img :src="item.thumb_text">
          <p><span>￥</span>{{item.price}}</p>
        </router-link>
      </div>
    </li>
  </ul>

  <!-- 底部 -->
  <menus />
  
</template>

<script setup>
    
    import {getCurrentInstance} from 'vue'
    const {proxy} = getCurrentInstance()

    var top = ref([])
    var type = ref([])
    var news = ref([])

    onBeforeMount(() => {
      home()
    })

    let home = async () => {
      var result = await proxy.$POST({
        url: '/index/index',
        params:{}
      })

      top.value = result.data.top
      type.value = result.data.type
      news.value = result.data.news
    }
</script>

<style>
  .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    height: 250px;
    text-align: center;
    background-color:black;
  }

  .proul {
    display: flex;
    flex-wrap: wrap;
  }
  .proul li .con img{
    width: 40%;
    height: 150px;
  }
</style>